<%@ page import="com.iweb.constant.UserAction" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
  <base href="<%=basePath%>">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta charset="utf-8"/>
  <title>新增用户</title>

  <meta name="description" content=""/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>

  <!-- bootstrap & fontawesome -->
  <link rel="stylesheet" href="assets/css/bootstrap.min.css"/>
  <link rel="stylesheet" href="assets/font-awesome/4.5.0/css/font-awesome.min.css"/>
  <!-- text fonts -->
  <link rel="stylesheet" href="assets/css/fonts.googleapis.com.css"/>
  <!-- ace styles -->
  <link rel="stylesheet" href="assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style"/>
  <link rel="stylesheet" href="assets/css/ace-skins.min.css"/>
  <link rel="stylesheet" href="assets/css/ace-rtl.min.css"/>
  <!-- ace settings handler -->
  <script src="assets/js/ace-extra.min.js"></script>
</head>

<body class="no-skin">
<%@include file="navbar.jsp" %>

<div class="main-container ace-save-state" id="main-container">
  <script type="text/javascript">
    try {
      ace.settings.loadState('main-container')
    } catch (e) {
    }
  </script>

  <%@include file="siderbar.jsp" %>

  <div class="main-content">
    <div class="main-content-inner">
      <div class="breadcrumbs ace-save-state" id="breadcrumbs">
        <ul class="breadcrumb">
          <li>
            <i class="ace-icon fa fa-home home-icon"></i>
            <a href="#">Home</a>
          </li>
          <li>
            <a href="#">用户管理</a>
          </li>
          <li class="active">新增用户</li>
        </ul><!-- /.breadcrumb -->

        <div class="nav-search" id="nav-search">
          <form class="form-search">
								<span class="input-icon">
									<input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input"
                         autocomplete="off"/>
									<i class="ace-icon fa fa-search nav-search-icon"></i>
								</span>
          </form>
        </div><!-- /.nav-search -->
      </div>

      <div class="page-content">
        <div class="ace-settings-container" id="ace-settings-container">
          <div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
            <i class="ace-icon fa fa-cog bigger-130"></i>
          </div>

          <div class="ace-settings-box clearfix" id="ace-settings-box">
            <div class="pull-left width-50">
              <div class="ace-settings-item">
                <div class="pull-left">
                  <select id="skin-colorpicker" class="hide">
                    <option data-skin="no-skin" value="#438EB9">#438EB9</option>
                    <option data-skin="skin-1" value="#222A2D">#222A2D</option>
                    <option data-skin="skin-2" value="#C6487E">#C6487E</option>
                    <option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
                  </select>
                </div>
                <span>&nbsp; Choose Skin</span>
              </div>

              <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-navbar"
                       autocomplete="off"/>
                <label class="lbl" for="ace-settings-navbar"> Fixed Navbar</label>
              </div>

              <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-sidebar"
                       autocomplete="off"/>
                <label class="lbl" for="ace-settings-sidebar"> Fixed Sidebar</label>
              </div>

              <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-breadcrumbs"
                       autocomplete="off"/>
                <label class="lbl" for="ace-settings-breadcrumbs"> Fixed Breadcrumbs</label>
              </div>

              <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl" autocomplete="off"/>
                <label class="lbl" for="ace-settings-rtl"> Right To Left (rtl)</label>
              </div>

              <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-add-container"
                       autocomplete="off"/>
                <label class="lbl" for="ace-settings-add-container">
                  Inside
                  <b>.container</b>
                </label>
              </div>
            </div><!-- /.pull-left -->

            <div class="pull-left width-50">
              <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-hover" autocomplete="off"/>
                <label class="lbl" for="ace-settings-hover"> Submenu on Hover</label>
              </div>

              <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-compact" autocomplete="off"/>
                <label class="lbl" for="ace-settings-compact"> Compact Sidebar</label>
              </div>

              <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-highlight" autocomplete="off"/>
                <label class="lbl" for="ace-settings-highlight"> Alt. Active Item</label>
              </div>
            </div><!-- /.pull-left -->
          </div><!-- /.ace-settings-box -->
        </div><!-- /.ace-settings-container -->

        <div class="row">
          <div class="col-xs-12">
            <!-- PAGE CONTENT BEGINS -->
            <form action="user.do?action=<%=UserAction.DOADD%>" class="form-horizontal" role="form" id="user-form"
                  method="post">
              <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="loginName"> 登录名 </label>
                <div class="col-sm-9">
                  <input type="text" id="loginName" placeholder="登录名" name="loginName" class="col-xs-10 col-sm-5"/>
                  <span class="help-inline col-xs-12 col-sm-7">
												<span class="middle"></span>
                  </span>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="userName"> 用户姓名 </label>
                <div class="col-sm-9">
                  <input type="text" id="userName" name="userName" placeholder="用户姓名" class="col-xs-10 col-sm-5"/>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right"> 性别 </label>
                <div class="col-sm-9">
                  <div class="radio col-sm-1">
                    <label>
                      <input name="sex" type="radio" class="ace" value="1">
                      <span class="lbl"> 男</span>
                    </label>
                  </div>
                  <div class="radio col-sm-1">
                    <label>
                      <input name="sex" type="radio" class="ace" value="0">
                      <span class="lbl"> 女</span>
                    </label>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="identityCode"> 身份证号 </label>
                <div class="col-sm-9">
                  <input type="text" id="identityCode" name="identityCode" placeholder="身份证号"
                         class="col-xs-10 col-sm-5"/>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="email"> 邮箱 </label>
                <div class="col-sm-9">
                  <input type="text" id="email" name="email" placeholder="邮箱" class="col-xs-10 col-sm-5"/>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="mobile"> 手机号 </label>
                <div class="col-sm-9">
                  <input type="text" id="mobile" name="mobile" placeholder="手机号" class="col-xs-10 col-sm-5"/>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="type"> 用户类型 </label>
                <div class="col-sm-9">
                  <div class="row">
                    <div class="col-sm-5">
                      <select class="form-control col-sm-5" id="type" name="type">
                        <option value="">请选择用户类型</option>
                        <option value="1">系统管理员</option>
                        <option value="0">普通会员</option>
                      </select>
                    </div>
                  </div>
                </div>
              </div>
              <div class="clearfix form-actions">
                <div class="col-md-offset-3 col-md-9">
                  <button class="btn btn-info" type="button" id="btn-save">
                    <i class="ace-icon fa fa-check bigger-110"></i>
                    保存
                  </button>
                  &nbsp; &nbsp; &nbsp;
                  <button class="btn" type="reset">
                    <i class="ace-icon fa fa-undo bigger-110"></i>
                    重填
                  </button>
                </div>
              </div>
            </form>
            <!-- PAGE CONTENT ENDS -->
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.page-content -->
    </div>
  </div><!-- /.main-content -->
  <%@include file="footer.jsp" %>
</div><!-- /.main-container -->

<script src="assets/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
  if ('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
</script>
<script src="assets/js/bootstrap.min.js"></script>

<!-- ace scripts -->
<script src="assets/js/ace-elements.min.js"></script>
<script src="assets/js/ace.min.js"></script>
<script>
  // 设值表单是否可以提交
  let canSubmit = false;

  $(function () {
    $("#btn-save").click(function () {
      if (canSubmit) {
        $("#user-form").submit();
      }
    });

    $("#loginName").blur(function () {
      // 进行用户登名重名的校验
      let loginName = this.value;
      if (!loginName) {
        $(this).next("span").children("span").text("登录名不能为空");
        return;
      }
      // 重名验证- jquery ajax方式post
      checkLoginName3(loginName);
    });
  });


  /**
   * 传统ajax方式验证登录名重名
   * @param obj
   */
  function checkLoginName(loginName) {
    // 开始发送请求
    // 1.创建核心对象
    let xmlHttpRequest = new XMLHttpRequest();
    // 2.指定回调函数
    xmlHttpRequest.onreadystatechange = doResponse;
    // 3.创建http请求 get方式
    // let url = "user.do?action=checkLoginName&loginName=" + loginName;
    // xmlHttpRequest.open("GET", url);
    // post方式
    let url = "user.do";
    xmlHttpRequest.open("POST", url);
    // 4.发送请
    // get方式
    // xmlHttpRequest.send(null);
    // post方式
    let data = "action=checkLoginName&loginName=" + loginName;
    // 设置post头部信息
    xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xmlHttpRequest.send(data);

    // 5.处理回调函数
    function doResponse() {
      // 判断获取到了返回结果
      if (xmlHttpRequest.readyState == 4) {
        // 开始处理
        if (xmlHttpRequest.status == 200) {
          // 服务器响应的是正确的结果
          // 返回的是json字符串
          let result = xmlHttpRequest.responseText;
          // 转为js对象后,进行操作
          let json = JSON.parse(result);
          let message = "";
          if (json.code == "00000") {
            // 设值可以提交
            canSubmit = true;
            message = "用户名可以使用";
            $("#loginName").next("span").removeClass("red").addClass("green");
          }
          if (json.code == "A0111") {
            message = "用户名已存在";
            $("#loginName").next("span").removeClass("green").addClass("red");

            // 设值不可以提交
            canSubmit = false;
          }

          $("#loginName").next("span").children("span").text(message);
        } else {
          alert("暂时未获取到结果,请重试");
        }
      }
    }
  }

  /**
   * jquery的ajax(get)方式验证登录名重名
   */
  function checkLoginName2(loginName) {
    let url = "user.do?action=checkLoginName&loginName=" + loginName;
    $.ajax({
      "url": url,
      // 发送请求的类型
      "type": "get",
      // 返回的数据类型
      "dataType": "json",
      "success": function (result) {
        let message = "";
        if (result.code == "00000") {
          // 设值可以提交
          canSubmit = true;
          message = "用户名可以使用";
          $("#loginName").next("span").removeClass("red").addClass("green");
        }
        if (result.code == "A0111") {
          message = "用户名已存在";
          $("#loginName").next("span").removeClass("green").addClass("red");

          // 设值不可以提交
          canSubmit = false;
        }
        $("#loginName").next("span").children("span").text(message);
      },
      "error": function (e) {
        console.log(e);
      }
    });


  }

  /**
   * jquery的ajax(post)方式验证登录名重名
   */
  function checkLoginName3(loginName) {
    let myData = "action=checkLoginName&loginName=" + loginName;
    $.ajax({
      "url": "user.do",
      // 发送请求的类型
      "type": "post",
      // post请求里所带的参数
      "data": myData,
      // 返回的数据类型
      "dataType": "json",
      "success": function (result) {
        let message = "";
        if (result.code == "00000") {
          // 设值可以提交
          canSubmit = true;
          message = "用户名可以使用";
          $("#loginName").next("span").removeClass("red").addClass("green");
        }
        if (result.code == "A0111") {
          message = "用户名已存在";
          $("#loginName").next("span").removeClass("green").addClass("red");

          // 设值不可以提交
          canSubmit = false;
        }
        $("#loginName").next("span").children("span").text(message);
      },
      "error": function (e) {
        console.log(e);
      }
    });


  }


</script>
</body>
</html>
